<template>
  <div>
    <div>姓名： {{ personReactive.name }}</div>
    <div>年龄： {{ personReactive.age }}</div>
    <div>城市： {{ personReactive.city }}</div>
    <button class="btn" @click="handleName">修改名称</button>
    <button class="btn" @click="handleCity">修改城市</button>
    <button class="btn" @click="handleAll">修改全部</button>
    <div>
      数字： {{ sum }} <button @click="changeNum">修改数字</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue';
let person = {
  name: 'John',
  age: 30,
  city: 'New York'
}


//基本数据类型
let sum = ref(0);
function changeNum() {
  // sum.value = sum.value + 1
  sum = ref(23)
}

//引用数据类型
const personRef = ref(person)
console.log(personRef.value.name);

const personReactive = reactive(person)
/**
 * 修改数据
 * 1. 修改属性
 * 2. 覆盖修改
 */
let obj2 = toRefs(personRef.value)
console.log(obj2, 'kkkkk-----------');
// const 
let {city} = toRefs(personReactive)

const handleName = () => {
  // personReactive.name = "wangda ge";
  obj2.name.value = "ksdkfkkkkkkk"
}

const handleCity = () => {
  city.value = "Si Chuang"
}

const handleAll = () => {
  const res = {
    name: 'li si',
    age: 22,
    city: 'Bei Jing'
  }
  Object.assign(personReactive, res)
}

/**
 * reactive 和ref 的区别：
 * reactive不能直接赋值，对象需要借助 Object.assign()方法，数组则是通过push或者 reactive({list: []}) 包裹一层来进行覆盖赋值
 * 或者通过const list = ref([])  list.value = [1,2,3]
 *  
*/

</script>

<style scoped lang='scss'></style>
